<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.js"></script>
</head>
<body>
    <div id="app">
        <!-- v-if通过删除或者新增dom,控制元素显示,不频繁切换用v-if -->
        <!-- v-show通过控制样式display,控制元素显示,频繁切换用v-show -->
        <!-- 在原生标签上使用 -->
        <div v-if="isShow">通过v-if控制</div>
        <div v-show="isShow">通过v-show控制</div>
        <!-- 通过v-if控制组件显示,它影响组件的生命周期 -->
        <!-- 通过v-show控制组件显示,它不影响组件的生命周期 -->
        <!-- <my-component v-if="isShow"></my-component> -->
        <my-component v-show="isShow"></my-component>
    </div>
</body>
<script>
Vue.component('MyComponent', {
    template: `
        <div>子组件</div>
    `,
    created(){
        console.log('created')
    },
    destroyed() {
        console.log('destoryed')
    },
}) 
let vm = new Vue({
    el: '#app',
    data(){
        return {
            isShow: false
        }
    },
    methods: {
    }
})
</script>
</html>